<meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

<div align=center>输入文本:<input id=text onclick=choosed=false;r=0;bu.innerHTML="选择";><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick=left() align=left>←</button><button onclick=choose() id=bu>选择</button><button align=right onclick=right()>→</button>
<br>
选中文本:<div id=r2></div><button onclick=copy(r2.innerHTML)>复制</button>
</div>
<div id=c></div>
<script>
// 获取光标位置
function getCursortPosition (textDom) {
    var cursorPos = 0;
    if (document.selection) {
        // IE Support
        textDom.focus ();
        var selectRange = document.selection.createRange();
        selectRange.moveStart ('character', -textDom.value.length);
        cursorPos = selectRange.text.length;
    }else if (textDom.selectionStart || textDom.selectionStart == '0') {
        // Firefox support
        cursorPos = textDom.selectionStart;
    }
    return cursorPos;
}
// 设置光标位置
function setCaretPosition(textDom, pos){
    if(textDom.setSelectionRange) {
        // IE Support
        textDom.focus();
        textDom.setSelectionRange(pos, pos);
    }else if (textDom.createTextRange) {
        // Firefox support
        var range = textDom.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}
/**
* 选中特定范围的文本
* 参数：
*     textDom  [JavaScript DOM String] 当前对象
*     startPos  [Int]  起始位置
*     endPos  [Int]  终点位置
*/
function setSelectText(textDom, startPos, endPos) {
    var startPos = parseInt(startPos),
        endPos = parseInt(endPos),
        textLength = textDom.value.length;
    if(textLength){
        if(!startPos){
            startPos = 0;
        }
        if(!endPos){
            endPos = textLength;
        }
        if(startPos > textLength){
            startPos = textLength;
        }
        if(endPos > textLength){
            endPos = textLength;
        }
        if(startPos < 0){
            startPos = textLength + startPos;
        }
        if(endPos < 0){
            endPos = textLength + endPos;
        }
        if(textDom.createTextRange){
            // IE Support
            var range = textDom.createTextRange();
            range.moveStart("character",-textLength);
            range.moveEnd("character",-textLength);
            range.moveStart("character", startPos);
            range.moveEnd("character",endPos);
            range.select();
        }else{
            // Firefox support
            textDom.setSelectionRange(startPos, endPos);
            textDom.focus();
        }
    }
}
var dt=document.getElementById("text")
var dr2=document.getElementById("r2")
var bu=document.getElementById("bu")
var mark;
var r=0;
var choosed=false;
function left()
{var s=getCursortPosition(dt);
if(choosed&&s!=0)
{
r--;
m();
}
else
{
if(s!=0)
{
var s=getCursortPosition(dt);
setCaretPosition(dt,s-1)
sf()
}
else
{
setCaretPosition(dt,0)
sf()
}
}
}
var n=2;//随机数不可取值
function copy(x)
{
if(n==2)
{
n=Math.random()
document.getElementById("c").innerHTML+="<input id="+n+">"//设置input
}
document.getElementById(n).style.display="block"
document.getElementById(n).value=x
 document.getElementById(n).select(); // 选择对象
 document.execCommand("Copy");
document.getElementById(n).style.display="none"
}
var i=0
function choose()
{
if(bu.innerHTML=="选择")
{
choosed=true
console.log("已选择")
bu.innerHTML="取消选择"
mark=getCursortPosition(dt);
console.log("mark:"+mark)
}
else
{
r=0;
var s=getCursortPosition(dt);
choosed=false
console.log("取消选择")
bu.innerHTML="选择"
setCaretPosition(dt,s);
dr2.innerHTML=""
}
}
function right()
{
var s=getCursortPosition(dt);
if(choosed)
{
if(s!=dt.value.length)
{
r++;
}
m();
}
else{
var s=getCursortPosition(dt);
setCaretPosition(dt,s+1)
}
}
function m()
{
console.log(r)
if(r>=0)
{
setCaretPosition(dt,mark+r)
dr2.innerHTML=dt.value.substring(mark,mark+r)
setSelectText(dt,mark,mark+r)
}
else
{
setCaretPosition(dt,mark+r)
dr2.innerHTML=dt.value.substring(mark+r,mark)
setSelectText(dt,mark+r,mark)
}
}
</script>
<style>
button{margin:0 15px;}
#text{
border: 1px solid black;
border-radius: 7px;
}
</style>